<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无垠星际：全星际最大的旅游网站</title>
	<script src="js/Js.js"></script>
<link rel="stylesheet" href="css/SYTLE.css">

<script type="text/javascript" src="js切换图片/jQuery.js"></script>
<script type="text/javascript" src="js动态时间/vue.min.js"></script>
<link rel="shortcut icon" href="images/bitbug_favicon.ico"/>
<link href="css切换图片/slider.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="无垠星际主页css.css">


</head>
<body onload="time()">
	<div id="yc">

		
	<div id="tb1"><a href=""><img src="images/飞船5.png"></a></div>
	<div id="tb"><a href="无垠星际主页（响应式）.html">无垠星际</a></div>




	<div id="dl"><a href="登录和注册（响应式）.html">登录</a><font color="white">丨</font><a href="登录和注册（响应式）.html">注册</a></div>
	
	<div id="img">
		<img src="images/星际穿越.jpg" width="100%" height="750px">
	</div>
	<div id="img1">
		<img src="images/星空1.jpg" width="100%" height="750px">
	</div>
	<div id="fx"><a href="#top"><img src="images/回到顶部.png" width="40px" height="40px"></a><a href=""><img src="images/朋友圈.png" width="40px" height="40px"></a> &nbsp;<a href=""><img src="images/QQ.png" width="40px" height="40px"></a> &nbsp;<a href=""><img src="images/微博.png" width="40px" height="40px"></a> &nbsp;<a href=""><img src="images/豆瓣.png" width="40px" height="40px"></a></div>


	<nav><!--pc端导航栏-->
		
		<ul id="menu">
			<li><a href="无垠星际主页（响应式）.html">首页</a></li>
			<li><a href="">度假星</a>
             <ul id="sub">
				<li><a href="">火星</a></li>
				<li><a href="">水星</a></li>
				<li><a href="">土星</a></li>
				<li><a href="">木卫二</a></li>
			  </ul>
			</li>			
			<li><a href="">飞船租赁</a>
              <ul id="sub">
				<li><a href="">度假系列</a></li>
				<li><a href="">运输系列</a></li>
				<li><a href="">二手市场</a></li>
			  </ul>
			</li>
			<li><a href="">超时空旅行</a>
				<ul id="sub">
				<li><a href="">家园Ⅰ期</a></li>
				<li><a href="">家园Ⅱ期</a></li>

			  </ul>
			</li>
			<li><a href="星际通行证预约（响应式）.html">星际通行证</a></li>

		</ul>
	</nav>
	
	
	
	
<div id="toutiao">
	<a href=""><img src="images/今日头条.png"></a>
</div>
	
	<div class="foucebox all1">
  <div class="bd">
    <div class="showDiv"> 
    	<a href="#"><img src="images/背景1.jpg"></a>
      <div class="foucebox_bg"></div>
      <div>
        <div id="h2"><h2 style="bottom: 60px; "><a href="#">23世纪：未来的星际不再“浩瀚”</a></h2></div>
        <p style="bottom: 10px;">简介：23世纪的到来也正好是无垠星际公司成立的第150年。公司在星际交通的领域中不断突破新技术，新模式，新理念。我们相信，未来的星际不再“浩瀚”!</p>
      </div>
    </div>
    <div class="showDiv"><a href="#"><img src="images/星空1.jpg"></a>
      <div class="foucebox_bg"></div>
      <div>
        <h2 style="bottom: 60px;"><a href="#">预约：家园Ⅱ期 <font size="3px">#超时空# #100光年#</font></a></h2>
        <p style="bottom: 10px;">简介：距地球100光年的家园Ⅱ期现已接受预定，预计5年后出发。本次的飞船极光号能适应各种太空恶劣环境，并且您将会在到达的前三个月享受十星级服务。预约热线666666</p>
      </div>
    </div>
    <div class="showDiv"><a href="#"><img src="images/飞船.jpg"></a>
      <div class="foucebox_bg"></div>
      <div>
        <h2 style="bottom: 60px;"><a href="#">特价：度假飞船租赁</a></h2>
        <p style="bottom: 10px;">简介：最新九星级度假私人飞船#欧若拉#，#希斯特利亚#等系列飞船特价出租，支持无人驾驶系统，搭配XSpace畅游宇航服，3D星际地图等，欢迎前来咨询！</p>
      </div>
    </div>
    <div class="showDiv"><a href="#"><img src="images/星空4.jpg"></a>
      <div class="foucebox_bg"></div>
      <div>
        <h2><a href="#">木卫二度假星 <font size="3px">#度假星#</font></a></h2>
        <p style="bottom: 10px;">简介：星旅网排名第三的度假星，在这里您不仅可以享受七星到十星服务，还可以在这里近距离看到超级流星雨，太阳黑子闪焰，超星新爆炸，星云等奇观！</p>
      </div>
    </div>
    <div class="showDiv"><a href="#"><img src="images/星际穿越.jpg"></a>
      <div class="foucebox_bg"></div>
      <div>
        <h2><a href="#">事故！B3光速区两艘飞船发生追尾</a></h2>
        <p style="bottom: 10px;">简介：雄安时间2250年3月10日，在B3光速区一艘绿洲之星号载货飞船与一艘声望号私人飞船发生追尾事故，目前暂无人员伤亡！星际交通队已介入，具体事故成因还未确定</p>
      </div>
    </div>
    <div class="showDiv"><a href="#"><img src="images/飞船3.jpg"></a>
      <div class="foucebox_bg"></div>
      <div>
        <h2><a href="#">战舰：扬武号正式服役！<font size="3px">#扬武号#</font></a></h2>
        <p style="bottom: 10px;">简介：建造于2220年的超级战舰扬武号在成功与中国星军演习后，正式在E区服役，此后将与超级战舰星影号共同执行任务！</p>
      </div>
    </div>
    <div class="showDiv"><a href="#"><img src="images/星空3.jpg"></a>
      <div class="foucebox_bg"></div>
      <div>
        <h2><a href="#">奇观！白洞自噬</a></h2>
        <p style="bottom: 10px;">简介：我们都知道黑洞进经过虫洞然后白洞出，由于天然虫洞内部极其不稳定，有小部分几率会波及白洞的稳定性，使白洞内部发生裂变，最终开始反噬自己，详情请<a href="">查看更多>></a></p>
      </div>
    </div>
    <div class="showDiv"><img src="images/星空4.jpg">
      <div class="foucebox_bg"></div>
      <div>
        <h2><a href="#">标题</a></h2>
        <p style="bottom: 10px;">简介</p>
      </div>
    </div>
  </div>
  <div class="hd">
    <ul>
      <li class="on"><a href="#"><img src="images/背景1.jpg"><span class="txt">23世纪</span><span class="txt_bg"></span><span class="mask"></span></a></li>
      <li><a href="#"><img src="images/星空1.jpg"><span class="txt">家园Ⅱ期</span><span class="txt_bg"></span><span class="mask"></span></a></li>
      <li><a href="#"><img src="images/飞船.jpg"><span class="txt">特价飞船租赁</span><span class="txt_bg"></span><span class="mask"></span></a></li>
      <li><a href="#"><img src="images/星空4.jpg"><span class="txt">木卫二度假星</span><span class="txt_bg"></span><span class="mask"></span></a></li>
      <li><a href="#"><img src="images/星际穿越.jpg"><span class="txt">事故!B3光速区追尾</span><span class="txt_bg"></span><span class="mask"></span></a></li>
      <li><a href="#"><img src="images/飞船3.jpg"><span class="txt">军事：扬武号</span><span class="txt_bg"></span><span class="mask"></span></a></li>
      <li><a href="#"><img src="images/星空3.jpg"><span class="txt">奇观！白洞自噬</span><span class="txt_bg"></span><span class="mask"></span></a></li>
      <li><a href="#"><img src="images/星空4.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li><!--轮播图片-->
    </ul>
  </div>
</div>

<script type="text/javascript" src="js/jquery.SuperSlide.js"></script> 
<script type="text/javascript">
jQuery(".foucebox").slide({ effect:"fold", autoPlay:true, delayTime:300, startFun:function(i){jQuery(".foucebox .showDiv").eq(i).find("h2").css({display:"none",bottom:0}).animate({opacity:"show",bottom:"60px"},300);jQuery(".foucebox .showDiv").eq(i).find("p").css({display:"none",bottom:0}).animate({opacity:"show",bottom:"10px"},300);}});
</script>


<div id="hangbanT1">
	<a href="">航班</a>
</div>
<div id="hangbanT2">
	<a href="">Flight Message</a>
</div>
<div id="hangban">
<div id="hangban1"></div>
<div id="hangban2"></div>
</div>
<div id="hangban3"><img src="images/飞船5.png"></div>
<div id="hangban4"><img src="images/度假星2.png"></div>
<div id="hangbanA"></div>

<div id="clock">
    <p class="time">2218年3月10日</p>
    <p class="time">{{ time }}</p>
    
</div>
<script type="text/javascript" src="js动态时间/vue.min.js"></script>

<script>
var clock = new Vue({
    el: '#clock',
    data: {
        time: '',
        date: ''
    }
});

var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
    var cd = new Date();
    clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
    clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
};

function zeroPadding(num, digit) {
    var zero = '';
    for(var i = 0; i < digit; i++) {
        zero += '0';
    }
    return (zero + num).slice(-digit);
}
</script>





<div id="dujiaxing">
	<a href="">度假星</a>

</div>
<div id="dujiaxing0">
	<a href="">Holiday Star</a>
</div>
<div id="dujiaxing1">
<div id="dujiaxing2"></div>
<div id="dujiaxing3"></div>
</div>
<div id="dujiaxing4"><img src="images/飞船5.png"></div>
<div id="dujiaxing5"><img src="images/度假星2.png"></div>

<div id="dujiaxingA">
</div>

<div id="dujiaxingB">
	<div class="slider_box" id="slider_name">
	<ul class="silder_con">		
		<li class="silder_panel"><a href="" class="f_l"><img src="侏罗纪世界/1.jpg" /></a></li>
		<li class="silder_panel"><a href="" class="f_l"><img src="侏罗纪世界/2.jpg" /></a></li>
		<li class="silder_panel"><a href="" class="f_l"><img src="侏罗纪世界/3.jpg"  /></a></li>
		<li class="silder_panel"><a href="" class="f_l"><img src="侏罗纪世界/4.jpg" /></a></li>
		<li class="silder_panel"><a href="" class="f_l"><img src="侏罗纪世界/5.jpg" /></a></li>
	</ul>
	<ul class="silder_nav">            
		<li><a href="">来一场恐龙世界杯吧！</a></li>    
		<li><a href="">不要慌，巨型蛟龙猎食！</a></li>    
		<li><a href="">大电影！侏罗纪世界3</a></li>    
		<li><a href="">全隐形近距离观察恐龙！</a></li>    
		<li><a href="">超巨型霸王龙！</a></li>    
	</ul>
</div>

<script src="js切换图片/jquery.slides.js" type="text/javascript"></script>

</div>

<div id="dujiaxingT1">
	<a href=""><font color="black">排行榜</font></a>
</div>

<div id="dujiaxingT2"><font color="gray">数据由</font><a href="">星旅网</a><font color="gray">独家提供</font></div>
<div id="dujiaxingT3"></div><!--分界线-->
<div id="dujiaxingT4"><font color="red">No.1</font></div>
<div id="dujiaxingT5"></div>
<div id="dujiaxingT6"><font size="40px">9.8分</font><br><font size="6px" color="white">好 评 指 数</font></div>
<div id="dujiaxingT7"><a href=""><img src="images/朋友圈.png" width="40px" height="40px"></a> &nbsp;<a href=""><img src="images/QQ.png" width="40px" height="40px"></a> &nbsp;<a href=""><img src="images/微博.png" width="40px" height="40px"></a> &nbsp;<a href=""><img src="images/豆瓣.png" width="40px" height="40px"></a></div>
<div id="dujiaxingT8"><font color="gray">地址：</font>  <a href="">火星A3区杨利伟大道</a><br><font color="gray">预订热线：</font> 666666</div>


<a href="英雄，去超越（响应式）.html"><div id="left">

<div id="left1">英<br>雄<br>们<br>，<br>去<br>超<br>越</div>
<div id="left2"><img src="images/foucebox_h2.png"></div>
</div>
</a>
<div id="bq"><font size="6" color="white">合作伙伴</font>
<div id="bq1"><font color="white"><a href="">星旅网</a></font></div>
<div id="bq2"><font color="white"><a href="">火星联盟</a></font></div>
<div id="bq3"><font color="white"><a href="">XSpace</a></font></div>
<div id="bq0"><font color="gray" size="4">无垠星际旅游有限公司版权所有</font><br><font color="gray" size="3">Copyright©2100-2218,ctrip.com.All rights reserved.|ICP证：粤B2-20050130</font><br><font color="gray" size="3">旅游违法行为举报电话123456丨服务质量投诉电话666666丨违法和不良信息举报电话123456丨广东省旅游网站落实诚信建设主体责任承诺书</font></div>
<div id="bqg"><font color="white"><a href="">广告加盟</a></font></div>
</div>


</div>












<!--………………………………………………………………………………………………………………响应式…………………………………………………………………………………………………………-->

	



<div id="yc1">
<nav>
		<div class="line">
				<div class="one"></div>
                <div class="two"></div>
                <div class="three"></div>
		</div>
		<ul id="menu">
			<li><a href="无垠星际主页（响应式）.html">首页</a></li>
			<li id="mm"><a href="">度假星</a>
             <ul id="sub">
				<li><a href="">火星</a></li>
				<li><a href="">水星</a></li>
				<li><a href="">土星</a></li>
				<li><a href="">木卫二</a></li>
			  </ul>
			</li>			
			<li id="mm"><a href="">飞船租赁</a>
              <ul id="sub">
				<li><a href="">度假系列</a></li>
				<li><a href="">运输系列</a></li>
				<li><a href="">二手市场</a></li>
			  </ul>
			</li>
			<li id="mm"><a href="">超时空旅行</a>
				<ul id="sub">
				<li><a href="">家园Ⅰ期</a></li>
				<li><a href="">家园Ⅱ期</a></li>
			  </ul>
			</li>
			<li><a href="星际通行证预约（响应式）.html">星际通行证</a></li>

		</ul><!--手机端导航栏-->
	</nav>
	<div id="su">
		
		<div id="su4">
		<div id="su3">
		<input type="text" id="username" name="" style="width: 220px ;height: 30px;">
		</div>
		<div id="su1">
		<input type="button" value="搜索"  style="width: 40px ;height: 30px;font-family:本墨锵黑;font-size: 16px;">
		</div>
		
		</div>
		<div id="dl"><a href="登录和注册（响应式）.html">登录</a></div>
	</div>
<div id="tp1"><img src="images/星际穿越.jpg" style="width: 100%;height: 100%"></div>
<div id="tp11"><font color="white">#23世纪#<br><font size="4px">未来的星际不再"浩瀚"</font></font></div>
<a href=""><div id="tp12"><font color="white">查看专题</font></div></a>



<div id="tp2"><img src="images/飞船.jpg" style="width: 100%;height: 100%"></div>
<div id="tp21"><font color="white">#希斯特利亚#<br><font size="4px">全新度假飞船，不止于九星服务</font> </font></div>
<a href=""><div id="tp22"><font color="white">先睹为快</font></div></a>



<div id="tp3"><a href=""><img src="images/英雄背景.jpg" style="width: 100%;height: 100%"></a></div>
<div id="tp31"><font color="white">#英雄，永无止境#<br><font size="4px">纪念：22世纪最伟大的星际英雄</font></font></div>
<a href="英雄，去超越（响应式）.html">
<div id="tp32">
<img src="images/播放按钮.png"style="width: 100px;height: 100px">
</div>
</a>
</div>


	

	
</body>
</html>